<template>
  <div class="app-container">
    <div
      v-for="(item,index) in serverList"
      :key="index"
    >
      <el-card style="margin: 5px">
        <div class="flex">
          <div style="color: #0070cc;font-size: 25px">{{ item.name }}</div>
          <div class="mt-1 ml-5">
            <el-tag type="success">{{
                item.serverId
              }}
            </el-tag>
            <el-tag :type="item.server?'success':'danger'">{{
                formatDeviceStatus(item.server ? 'ONLINE' : 'OFFLINE')
              }}
            </el-tag>
            <el-switch
              @change="updateDeviceServer(item)"
              v-model="item.status"
              :active-text="$t('open')"
              :inactive-text="$t('disable')"
            />
          </div>
        </div>
        <div style="display: flex;justify-content: space-between">
          <div>
            <div style="color: #929292;font-size: 6px;margin-top: 5px">
              <span>{{ $t('type') }}:</span><span>{{ item.serverType }}</span>
            </div>
            <div style="color: #929292;font-size: 6px;margin-top: 5px">
              <span>{{ $t('keyName') }}:</span><span>{{ item.serverMessage }}</span>
            </div>
            <div style="color: #929292;font-size: 6px;margin-top: 5px">
              <span>{{ $t('protocol') }}:</span><span>{{ item.protocol }}</span>
            </div>
            <div style="color: #929292;font-size: 6px;margin-top: 5px">
              <span>{{ $t('connect') + $t('address') }}:</span><span>{{ item.connectAddress }}</span>
            </div>
          </div>
          <div v-if="item.server">
            <div class="info">
              <div>
                <span class="info-title">{{ 'jvm' + $t('all') + $t('space') }}</span>
                <div class="info-value">
                  {{ item.server.jvmAllSpace }}
                </div>
              </div>
              <div>
                <span class="info-title">{{ 'jvm' + $t('free') + $t('space') }}</span>
                <div class="info-value">
                  {{ item.server.jvmFreeSpace }}
                </div>
              </div>
              <div>
                <span class="info-title">{{ 'jvm' + $t('max') + $t('space') }}</span>
                <div class="info-value">
                  {{ item.server.jvmMaxSpace }}
                </div>
              </div>
              <div>
                <span class="info-title">{{ 'jvm' + $t('used') + $t('space') }}</span>
                <div class="info-value">
                  {{ item.server.jvmUsedSpace }}
                </div>
              </div>
              <div>
                <span class="info-title">{{ $t('memory') + $t('all') + $t('space') }}</span>
                <div class="info-value">
                  {{ item.server.memoryAllSpace }}
                </div>
              </div>
              <div>
                <span class="info-title">{{ $t('memory') + $t('free') + $t('space') }}</span>
                <div class="info-value">
                  {{ item.server.memoryFreeSpace }}
                </div>
              </div>
              <div>
                <span class="info-title">{{ $t('memory') + $t('used') + $t('space') }}</span>
                <div class="info-value">
                  {{ item.server.memoryUsedSpace }}
                </div>
              </div>
              <div>
                <span class="info-title">{{ $t('thread') }}</span>
                <div class="info-value">
                  {{ item.server.threadNum }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { formatDate, formatDeviceStatus, successNotice } from '@/util/common'
import { getDeviceServerSystemInfo, listDeviceServer, updateDeviceServer } from '@/api/iot/iotDeviceServerApi'

export default {
  name: 'DeviceServer',
  data() {
    return {
      serverList: []
    }
  },
  mounted() {
    this.listDeviceServer()
  },
  methods: {
    updateDeviceServer(item) {
      updateDeviceServer(item).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
        } else {
          this.listDeviceServer()
        }
      })
    },
    open(url) {
      window.open(url)
    },
    formatDeviceStatus(status) {
      return formatDeviceStatus(this, status)
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    listDeviceServer() {
      listDeviceServer(null).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.serverList = data
          this.serverList.forEach(server => {
            getDeviceServerSystemInfo({
              serverId: server.serverId
            }).then(res2 => {
              const { code, data } = res2
              if (code === '200') {
                server.server = data
                for (const i in this.serverList) {
                  if (this.serverList[i].serverId === server.serverId) {
                    const memoryConfig = {
                      radius: '40%',
                      activeRadius: '45%',
                      data: [],
                      digitalFlopStyle: {
                        fontSize: 20
                      },
                      showOriginValue: true
                    }
                    memoryConfig.data.push({
                      name: this.$t('memoryAllSpace'),
                      value: data.memoryAllSpace
                    })
                    memoryConfig.data.push({
                      name: this.$t('memoryFreeSpace'),
                      value: data.memoryFreeSpace
                    })
                    memoryConfig.data.push({
                      name: this.$t('memoryUsedSpace'),
                      value: data.memoryUsedSpace
                    })
                    server.server.memoryConfig = memoryConfig
                    this.serverList.splice(i, 1, server)
                  }
                }
              }
            })
          })
        }
      })
    }
  }
}
</script>
<style scoped>
.info {
  text-align: center;
  display: flex;
  align-content: space-around;
}

.info-title {
  color: #b3d3c2;
  font-size: 6px;
  margin: 0 13px;
}

.info-value {
  margin-top: 5px;
  font-family: PingFangSC-Medium;
  font-size: 24px;
  color: #333;
  letter-spacing: 0;
  line-height: 32px;
}
</style>
